import React from "react";

import Relay from "react-relay";
import {InputNumber,Modal,Input} from 'antd'

import EnterpriseRechargeMutation from "../mutation/EnterpriseRechargeMutation"

import {message} from 'antd';
function PrepaidEye(props){
    return(
        <div>
            查看
        </div>
    )
}

export default class A extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            vis:false,     //模态框显示
            item:{},         // 默认的item

            amoutText:"" ,   //充值金额value
            serialText:"",   //流水号value
            remitFile:{},   //凭证信息
            alarm:false,    //不合格提示
        };
        this.onCancel = this.onCancel.bind(this);
        this.onOk = this.onOk.bind(this);
        this.amoutChange = this.amoutChange.bind(this);
        this.serialChange = this.serialChange.bind(this);
        this.clear = this.clear.bind(this);
        this.amoutBlur = this.amoutBlur.bind(this);
    }

    // 请求更新数据
    requestData(item){
        Relay.Store.commitUpdate(
            new EnterpriseRechargeMutation({
                accountRecordId:item.accountRecordId
        }),
            {
                onFailure:()=>{
                    console.log("请求失败");
                },
                onSuccess:(response)=>{
                    let data = response.enterpriseRecharge.data;
                    if(data.errorCode ==="0"){
                        console.log(response);
                    }
                }
            }
        );
    }

    open(item){
        if(!item) { return; }

        let remitFileJson = null;
        const j = JSON.parse(item.remitFileJson);

        if(!item.remitFileJson || j.length <= 0){ remitFileJson={} }else{
            remitFileJson = {
                name:j[0].name,
                href:j[0].url
            }
        }

       this.setState({
            item:item,
            vis:true,
            remitFile:remitFileJson
        });

        // 发送数据需使用的参数
        this.requestInfo = {
            accountRecordId:item.accountRecordId,
            examineBy:item.examineBy,
        };
       // 请求更新数据
    }

    // 取消弹出框
    onCancel(){ this.clear(); }

    //充值金额 change
    amoutChange(e){this.setState({amoutText:e});}

    //充值金额  blur
    amoutBlur(){
        const v = this.state.amoutText.toString(),
            //小数点出现的位置(减1是因为有"."一位，否则v.length 是因v.length -v.length等于０)，
               r = v.indexOf(".")!== -1 ? v.indexOf(".")-1 : v.length;
        const end = v.length - r;  //出现在小数点后面的个数

        // end 代表小数点后面的位数
        if(end > 2){
            //保留两位小数
            this.setState({
                amoutText:parseFloat(v.slice(0,v.indexOf(".")+3))
            })
        }
    }

    // 流水号
    serialChange(e){ this.setState({serialText:e.target.value});}

    // 格式校验
    textText(text){
        let R = /[^\s]/;  //判断为空;

        if(R.test(text)) { return false }else{
            return true
        }
    }

    onOk(){
        // 格式校验
       const Am = this.state.amoutText;

        if(this.state.item.applyStatus != "2"){

           if(this.textText(Am) || this.textText(this.state.serialText)){
               this.setState({alarm:true});
               return;
           }

           if(parseFloat(Am)<1 || Am.length>10){
               this.setState({alarm:true});
               return;
           }else{
               // 发送数据
               const info = this.requestInfo,
                   id = sessionStorage.getItem("msUid"),
                   name = sessionStorage.getItem("msUserName");

               if(!id){ message.error("获取账号信息失败，请重新登录") };

               // 请求数据
               Relay.Store.commitUpdate(
                   new EnterpriseRechargeMutation({
                       accountRecordId:info.accountRecordId,
                       amount:this.state.amoutText,
                       tranNo:this.state.serialText,
                       examineBy:name,
                       examineId:id
                   }),
                   {
                       onFailure:()=>{
                           message.error("网络连接失败，请联系系统管理员");
                       },
                       onSuccess:(response)=>{
                           let data = response.enterpriseRecharge.data;
                           if(data.errorCode ==="0"){
                               message.success("充值成功");
                               this.props.newList();
                           }else{
                               message.info(data.value)
                           }
                       }
                   }
               );
               // 清空数据
               this.clear();
           }
       }else{
           // 清空数据
           this.clear();
       }
    }

    clear(){
        this.setState({
            alarm:false,
            vis:false,
            amoutText:"",
            serialText:""
        })
    }

    //asd
    render(){
        const {vis,item,amoutText,serialText,remitFile,alarm} = this.state,
            {applyStatus} = item;

        const type = applyStatus == "2" ? "查看" : "充值确认";

        return (
            <Modal
                className="recharge_PrepaidConfirm"
                title={type}
                visible={vis}
                onOk={this.onOk}
                onCancel={this.onCancel}
            >
                {
                    applyStatus =="2" ?
                        <ul className="recharge_PrepaidConfirm_list">
                            <li><span> 提交充值金额 ： </span> {item.applyAmount} </li>
                            <li> <span> 实际充值金额 ：</span> {item.amount} </li>
                            <li><span> 交易流水号 ： </span> {item.tranNo} </li>
                            <li> <span> 汇款凭证 ：</span> <a href={remitFile.href}> {remitFile.name} </a> </li>
                        </ul> :

                        <ul className="recharge_PrepaidConfirm_list">
                            <li>  <span>充值金额 ：{item.applyAmount}</span>  </li>
                            <li>  <span>  <i></i> 填写充值金额：</span>
                                <InputNumber  type="text"
                                              max={99999999}
                                              min={1}
                                              style={{width:150}}
                                              size="small" onChange={this.amoutChange} onBlur={this.amoutBlur} value={amoutText}
                                />
                            </li>
                            <li>
                                <span><i></i>填写交易流水号：</span>
                                <Input type="text" maxLength="50" style={{boxSizing:"border-box",width:150}} size="small"  value={serialText} onChange={this.serialChange}/>
                            </li>
                            <li> <span> 汇款凭证：</span>
                                <a href={remitFile.href}> {remitFile.name} </a>
                            </li>
                        </ul>
                }

                {
                    applyStatus !="2" &&
                        <footer>
                            <p className={alarm?"operLog_auditAlarm" : "hide"}>
                                请检查信息完整性及正确性
                            </p>
                        </footer>
                }

            </Modal>
        )
    }
}